﻿<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<MVCFoto.Web.ViewData.PhotoDetailViewData>" %>
<%@ Import Namespace="MVCFoto.Web.Utility" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><%=Html.Encode(Model.Photo.Title) %></title>
    <script type="text/javascript" src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.min.js") %>"> </script>
    
<style type="text/css">
    body{font-size:9pt;}
    a.current{font-weight:bold; color:Red;}
    a:hover {
font-weight:bold;
text-decoration:none;
}
a:link 
{
    padding:.5em;
color:#0063DC;
font-family:"Arial, Helvetica, sans-serif";
font-size:12px;
text-decoration:underline;
}
.top{border-bottom:3px solid #ccc; display:block; height:40px;}
.bottom{border-top:3px solid #ccc;}
.sizelist{line-height:3em; clear:both;}
.userinfo{display:block; float:right; width:80%; line-height:40px;}
img{border:none; margin:3px 0;}
img#photoobj{border:1px solid #ccc;}
img.avatar{border:1px solid #ccc; width:32px; }
</style>  
<script language="javascript" type="text/javascript">
    var photourl = '<%=ResolveUrl(Model.Photo.Photo) %>';
    var images = new Array();
    $(document).ready(function() {
        
        var img0 = new Image();
        img0.src = thumbnailUrl(72);
        var img1 = new Image();
        img1.src = thumbnailUrl(144);
        var img2 = new Image();
        img2.src = thumbnailUrl(512);
        var img3 = new Image();
        img3.src = thumbnailUrl(800);
        var img4 = new Image();
        img4.src = thumbnailUrl(0);
        images.push(img0);
        images.push(img1);
        images.push(img2);
        images.push(img3);
        images.push(img4);
        
        links = $("a[class=contentlink]");
        links.click(function() {
            changeSize($(this).attr('rel'));

            for (i = 0; i < links.length; i++)
                $(links[i]).removeClass('current');

            $(this).attr('class', 'current');
        });

    });

function changeSize(size) {
    var photo = $("#photoobj");
    //photo.attr("src", "");
    photo.attr("src", images[size].src);
    
}
function thumbnailUrl(size) {
    if (size > 0) {
        var p = photourl.lastIndexOf("/") + 1;
        url = photourl.substr(0, p);
        url += "s" + size;
        url += photourl.substr(photourl.lastIndexOf("/"));
        url = url.replace(url.substr(url.lastIndexOf(".")), ".jpg");
        return url;
    }
    else
        return photourl;
}
</script>
  </head>
  <body>
<div class="top">
<div class="userinfo">
    <a href="<%=Url.RouteUrl("User",new{userid=Model.User.UserID}) %>">
    <img align="left" src='<%= ResolveUrl( Html.ThumbnailUrl(Model.User.Avatar,48)) %>' class="avatar" alt="useravatar" /></a>
   <a href="<%=Url.RouteUrl("User",new{userid=Model.User.UserID}) %>"  ><%=Model.User.UserName %></a> 上传于 <%=Model.Photo.CreateDate.ToString("yyyy年M月d日 H:mm:ss") %>
    </div>
    <a href="<%=Url.RouteUrl("Photo",new{id=Model.Photo.PhotoID}) %>"><strong>返回到照片页</strong></a>
</div>
<div class="sizelist">
可选尺寸：<a href="javascript:void 0;" rel="0" class="contentlink">图标尺寸(72)</a> |
 <a href="javascript:void 0;"  rel="1" class="contentlink">小缩略图(144)</a> |

  <a href="javascript:void 0;" rel="2" class="contentlink">中等大小(512)</a> |
   <a href="javascript:void 0;" rel="3" class="contentlink">大图(800)</a> |
    <a href="javascript:void 0;" rel="4" class="contentlink">原图</a> 
</div>
<div id="photo">
<img id="photoobj" src="<%=ResolveUrl(Html.ThumbnailUrl(Model.Photo.Photo,512)) %>" alt="<%=Model.Photo.Title %>" />
<br />
<a href="http://creativecommons.org/licenses/by/3.0/deed.zh" title="Creative Commons" target="_blank"><img src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Creative Commons" /></a>
<br />
<span style="color:Gray"><span style="font-size: 12px; font-family: Arial,Helvetica,sans-serif;">©</span> 保留所有版权</span>
</div>
<div class="bottom">
<a href="<%=Url.RouteUrl("Photo",new{id=Model.Photo.PhotoID}) %>"><strong>返回到照片页</strong></a>
</div>
  </body>
</html>
